<template>
  <el-form :inline="true" size="small" :model="query">
    <!-- 搜索 -->
    <el-form-item>
      <el-input v-model="query.username" clearable placeholder="输入关键字搜索" @keyup.enter.native="toQuery"/>
    </el-form-item>
    <el-form-item>
      <el-select v-model="query.type" clearable placeholder="类型">
        <el-option v-for="item in queryTypeOptions" :key="item.key" :label="item.display_name" :value="item.key"/>
      </el-select>
    </el-form-item>
    <el-form-item>
      <el-select v-model="query.enabled" clearable placeholder="状态" @change="toQuery">
        <el-option v-for="item in enabledTypeOptions" :key="item.key" :label="item.display_name" :value="item.key"/>
      </el-select>
    </el-form-item>
    <el-form-item>
      <el-button size="mini" type="primary" icon="el-icon-search" @click="toQuery">搜索</el-button>
      <!-- 新增 -->
      <div v-permission="['ADMIN','USER_ALL','USER_CREATE']" style="display: inline-block;margin: 0px 2px;">
        <el-button
          size="mini"
          type="primary"
          icon="el-icon-plus"
          @click="add">新增</el-button>
        <eForm ref="form" :sup_this="sup_this" :is-add="true" :dicts="dicts"/>
      </div>
      <!-- 导出 -->
      <div style="display: inline-block;">
        <el-button
          v-permission="['ADMIN']"
          :loading="downloadLoading"
          size="mini"
          type="success"
          icon="el-icon-download"
          @click="download">导出</el-button>
      </div>
    </el-form-item>
  </el-form>
</template>

<script>
import { parseTime } from '@/utils/index'
import eForm from './form'
// 查询条件
export default {
  components: { eForm },
  props: {
    query: {
      type: Object,
      required: true
    },
    sup_this: {
      type: Object,
      required: true
    },
    dicts: {
      type: Array,
      required: true
    }
  },
  data() {
    return {
      downloadLoading: false,
      queryTypeOptions: [
        { key: 'username', display_name: '用户名' },
        { key: 'email', display_name: '邮箱' }
      ],
      enabledTypeOptions: [
        { key: 'true', display_name: '激活' },
        { key: 'false', display_name: '停用' }
      ]
    }
  },
  methods: {
    add() {
      this.$refs.form.getDepts()
      this.$refs.form.getRoles()
      this.$refs.form.getRoleLevel()
      this.$refs.form.dialog = true
    },
    // 去查询
    toQuery() {
      this.sup_this.page = 0
      this.sup_this.init()
    },
    // 导出
    download() {
      this.downloadLoading = true
      import('@/vendor/Export2Excel').then(excel => {
        const tHeader = ['ID', '用户名', '电话', '邮箱', '头像地址', '状态', '注册日期', '最后登录时间']
        const filterVal = ['id', 'userName', 'telephone', 'email', 'avatar', 'enabled', 'createdAt', 'lastLoginAt']
        const data = this.formatJson(filterVal, this.sup_this.data)
        excel.export_json_to_excel({
          header: tHeader,
          data,
          filename: '爱豆优教系统用户表'
        })
        this.downloadLoading = false
      })
    },
    // 数据转换
    formatJson(filterVal, jsonData) {
      return jsonData.map(v => filterVal.map(j => {
        if (j === 'createdAt' || j === 'lastLoginAt') {
          return parseTime(v[j])
        } else if (j === 'enabled') {
          return parseTime(v[j]) ? '启用' : '禁用'
        } else {
          return v[j]
        }
      }))
    }
  }
}
</script>
